<template>
  <div class="my_room">
    <div>
      <van-nav-bar title="房间" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div class="my_fang">
      <span>我的房间</span>
    </div>
    <div>
      <div class="my_xuan">选择房间</div>
      <div class="my_roomshe">
        <div>卧室</div>
        <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_roomshe">
        <div>客厅</div>
        <div><van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_roomshe">
        <div>浴室</div>
        <div><van-switch v-model="checked3" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_roomshe">
        <div>书房</div>
        <div><van-switch v-model="checked4" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_roomshe">
        <div>茶水间</div>
        <div><van-switch v-model="checked5" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
    </div>
    <div>
      <span>成员</span>
    </div>
    <div class="my_cheng">
      <div class="my_cheng1">
        <img src="../../../../public/image/headimg/head (1).png" alt="">
        <p class="my_ming">迪南</p>
        <p>管理员</p>
      </div>
      <div class="my_cheng1">
        <img src="../../../../public/image/headimg/head (2).png" alt="">
        <p class="my_ming">姐姐</p>
        <p>全部权限</p>
      </div>
      <div class="my_cheng1">
        <img src="../../../../public/image/headimg/head (3).png" alt="">
        <p class="my_ming">爸爸</p>
        <p>全部权限</p>
      </div>
      <div class="my_cheng1">
        <img src="../../../../public/image/headimg/head (5).png" alt="">
        <p class="my_ming">妈妈</p>
        <p>全部权限</p>
      </div>
    </div>
    <div>
      <van-button color="linear-gradient(90deg, #fb8f66 0%, #7033ff 100%)" @click="add">
        保存
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';

const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(false)
const checked5 = ref(true)

const onClickLeft = () => {
  router.push('./Hello')
}
const add = () => {
  router.push('./Hello')
}
</script>

<style lang="scss" scoped>
.my_room {
  padding: 1rem;

  .my_fang {
    height: 3rem;
    color: #352C5D;
    font-size: 2rem;
    margin-top: 1rem;
  }

  .my_xuan {
    color: #352C5D;
    margin-top: 1rem;
  }

  .my_roomshe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 5rem;
    border-bottom: 0.1rem solid #f6f5fa;
    color: #ABA3CF;
  }

  .my_cheng {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;

    .my_cheng1 {
      text-align: center;
      color: #ABA3CF;
    }

    .my_ming {
      color: #352C5D;
    }

  }

  .van-button {
    width: 25.5rem;
    margin-top: 5rem;
    margin-left: 5rem;
  }
}
</style>